<template>
    <div class="my-order">
        <yx-header>
            <template #left>
                <van-icon name="arrow-left" @click="$router.go(-1)"/>
            </template>
            <template #center>
               订单详情
            </template>
            <template #right>
              
            </template>
        </yx-header>
        <ul class="ul">
         <!-- 循环遍历对象的时候index是属性名，item是属性值 -->
            <li v-for="(item,index) in orderObj" :key="index" >
              
                       <img :src="item.pic" alt="">
                       <h4>{{item.goodsName}}</h4>
                       <p>{{item.property}}</p>
                 
            </li>
        </ul>
    </div>
</template>
<script>
import yxHeader from '@/components/yxHeader'
import {ref,reactive,toRefs,computed} from 'vue'
import {useStore} from 'vuex'

import { Notify } from 'vant';
import {useRouter,useRoute} from 'vue-router'
import {getOrderDetail} from '@/utils/second'
export default {
    setup(props) {
        const data = reactive({
            orderObj:[]
        })
        const route = useRoute()
        const id = route.params.id
        getOrderDetail({token:localStorage.getItem('token'),id:id}).then(res=>{
            console.log(res)
            data.orderObj = res.data.goods
        })
        return {...toRefs(data)}
    },
    components:{
        yxHeader
    }
}
</script>
<style lang="scss" scoped>
.my-order{
    background: #f5f5f5;
}
.ul{
    padding: 0 16px;
   
   
    li{
         margin-top: 10px;
          background: #fff;
         
        h4{
            padding: 10px 0;
        }
        .ol{
            li{
                display: flex;
                img{
                    width:100px;
                    height: 100px;
                    border-radius:6px;
                }
                section{
                    flex:1;
                    margin-left: 10px;
                }
            }
        }
    }
}
</style>
